<template>
  <div class="delicacies">
    <div class="top_box">
      <div class="logo">
        菜篮子
       
      </div>
      <div class="car_box">制作方法</div>
      <div class="right_top">
        <!-- 回到菜谱页 -->
        <router-link to="/cookbook">
          <div class="home">返回</div>
        </router-link>
      </div>
    </div>

    <div class="content recipe-content clearfix" v-if="menuMain">
      <div class="left">
        <!-- 菜谱名称 -->
        <div class="relative">
          <div class="image">
            <img class="wb" :src="menuMain.photo_path" />
          </div>
        </div>
        <div class="rinfo relative">
          <h1 class="title text-lips" style="display: inline-block">
            {{ menuMain.title }}
          </h1>
          <div class="bouti_exclu">
            <span class="bouti">精品</span>
            <span class="exclu">独家</span>
          </div>
          <p class="intro">
            <!-- 今天跟大家分享一道小酥肉的做法，简单又好吃，平时和小姐妹聚会、追剧都少不了的解馋小零食，酥脆可口，吃了还想吃~ -->
            {{ menuMain.cookstory }}
          </p>
          <!-- 个人中心可编辑 -->
        </div>
        <!-- 材料 -->
        <div class="metarial">
          <h2 class="mini-title">{{ menuMain.title }}</h2>
          <table border="0" cellspacing="0" cellpadding="0" class="retamr br8">
            <tbody v-for="(item, index) in menuMain.major" :key="index">
              <tr>
                <td class="lirre" style="border-top: 0">
                  <span class="scname"
                    ><a href="/caipu/鸡胸肉" target="_blank">{{
                      item.title
                    }}</a></span
                  >
                  <span class="right scnum">{{ item.note }}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 步骤 -->
        <div class="step">
          <h2 class="mini-title">做法</h2>
          <div
            class="stepcont"
            v-for="(cook, index) in menuMain.cookstep"
            :key="index"
          >
            <img class="br8" :src="cook.image" />
            <div class="stepinfo">
              <p>步骤{{ index + 1 }}</p>
              {{ cook.content }}
            </div>
          </div>
        </div>
        <!-- 小贴士 -->
        <div class="tips">
          <h2 class="mini-title">{{ menuMain.tips }}</h2>
          <p><br />{{ menuMain.nutrition_facts_hint_text }}</p>
        </div>
      </div>
    </div>
    <footerpage></footerpage>
  </div>
</template>
<script>
import footerpage from "../components/FooterPage.vue";
import { getMenuMethod } from "../api/menu.js";

export default {
  data() {
    return {
      menuMain: [],
      // fullscreenLoading: false,
    };
  },
  methods: {
    getMenuMethodFun() {
      getMenuMethod(this.$route.query.id).then((data) => {
        console.log(data);
        this.menuMain = data.result.recipe;
        console.log(this.menuMain);
      });
    },

    openFullScreen1() {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 3000);
    },
  },
  created() {
    if ("id" in this.$route.query) {
      this.getMenuMethodFun();
    }
  },
  // mounted() {
  //   this.openFullScreen1();
  // },
  components: {
    footerpage,
  },
};
</script>
<style lang="scss" scoped>
.delicacies {
  background-color: #fff;
  .top_box {
    padding-right: 240px;
    width: 100%;
    background-color: #ad0002;
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: space-around;
    .logo {
      font-family: "font";
      font-weight: 700;
      font-size: 65px;
      color: #fff;
      transform: rotateZ(355deg);
      position: relative;
      img {
        position: absolute;
        top: 44px;
        right: 1px;
        width: 20px;
        height: 20px;
        border-radius: 7px;
      }
    }
    .car_box {
      margin: 0 170px;
      font-size: 35px;
      color: #fff;
      font-family: "font";
      font-weight: 700;
    }
    .right_top {
      display: flex;
      .home {
        color: #fff;
        font-size: 17px;
        padding-right: 70px;

        .icon-shouye-shouye {
          padding-right: 5px;
          font-size: 20px;
        }
      }
    }
  }
  .content {
    width: 700px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 100px;
    .recipe-content {
      margin-top: 30px;
    }
    .relative {
      position: relative;
      .image {
        display: block;
        width: 690px;
        // height: 400px;
        overflow: hidden;
        border-radius: 8px;
        .wb {
          display: block;
          width: 100%;
        }
        img {
          vertical-align: bottom;
        }
      }
    }
    // 菜谱名称
    .rinfo {
      margin-top: 20px;
      padding: 9px 0 40px;
      .title {
        font-size: 22px;
        color: #333;
        font-weight: bold;
        line-height: 24px;
      }
      .bouti_exclu {
        margin-top: 10px;
        font-size: 0;
        span {
          display: inline-block;
          margin-right: 16px;
          font-size: 14px;
          color: #fff;
          text-align: center;
          width: 42px;
          box-sizing: border-box;
          height: 22px;
          line-height: 22px;
          border-radius: 2px;
        }

        .bouti {
          background: #ffb31a;
        }
        .exclu {
          background: #ff4c44;
        }
      }
      .intro {
        font-size: 15px;
        color: #333;
        line-height: 27px;
        margin-top: 20px;
      }
    }
    // <!-- 材料 -->
    .metarial {
      padding-bottom: 40px;
      .mini-title {
        font-size: 18px;
        color: #333;
        line-height: 18px;
        font-weight: bold;
        margin: 30px 0 20px;
      }
      table {
        margin-left: 1px;
        color: #999;
        border-collapse: collapse;
        border-spacing: 0;
        overflow: hidden;
        border-radius: 15px;
        tr {
          background: #b9daeb;
          color: #333;
          .lirre {
            width: 343px;
            border-right: 1px solid #e5e5e5;
          }
        }

        td {
          border-top: 1px solid #e5e5e5;
          padding: 16px 0;
          width: 344px;
          .scname {
            display: inline-block;
            width: 254px;
            padding-right: 5px;
            a {
              color: #12937c;
              text-decoration: none;
              font-size: 15px;
            }
          }
          .scnum {
            display: inline-block;
            max-width: 90px;
            text-align: right;
            padding-left: 0;
          }
          span {
            padding: 0 18px;
            font-size: 15px;
          }
        }
      }
    }
    // 步骤
    .step {
      .mini-title {
        font-size: 18px;
        color: #333;
        line-height: 18px;
        font-weight: bold;
        margin: 30px 0 20px;
      }
      .stepcont {
        // width: 150px;
        height: 150px;
        display: flex;
        margin: 25px 0 40px;
        border-radius: 8px;
        img {
          border-radius: 8px;
          vertical-align: bottom;
        }
        .stepinfo {
          // float: left;
          padding: 0;
          width: 480px;
          word-wrap: break-word;
          margin-left: 10px;
          font-size: 15px;
          color: #333;
          line-height: 27px;
          overflow: hidden;
          p {
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>